<template>
  <div class="loginContainer">
    <div class="loginMain">
      <div class="loginTitle" data-text="霜雪后台管理系统">霜雪后台管理系统</div>
      <div class="loginList">
        <div class="register loginItem" :class="{ active: selectIndex == 0 }" @click="switchFnc(0)">
          <span class="showText" @click.stop>注册</span>
          <div class="registerBox" v-show="selectIndex == 0" @click.stop>
            <div class="regForm">
              <div class="userForm">
                <div class="userItem">
                  <input data-required required type="text" v-model="userForm.username" />
                  <label>
                    <svg-icon icon-class="user" size="1.2em" />
                    <span class="itemText">用户名</span>
                  </label>
                </div>
                <div class="userItem">
                  <input data-required required type="text" v-model="userForm.password" />
                  <label>
                    <svg-icon icon-class="password" size="1.2em" />
                    <span class="itemText">密码</span>
                  </label>
                </div>
              </div>
              <div class="submitBox" @click.stop="register">
                <span class="submit fill">Sign Up</span>
              </div>
            </div>
          </div>
        </div>
        <div class="login loginItem" :class="{ active: selectIndex == 1 }" @click="switchFnc(1)">
          <span class="showText" @click.stop>登录</span>
          <div class="loginBox" v-show="selectIndex == 1" @click.stop>
            <div class="loginForm">
              <div class="userForm">
                <div class="userItem">
                  <input data-required required type="text" v-model="userForm.username" />
                  <label>
                    <svg-icon icon-class="user" size="1.2em" />
                    <span class="itemText">用户名</span>
                  </label>
                </div>
                <div class="userItem">
                  <input data-required required type="text" v-model="userForm.password" />
                  <label>
                    <svg-icon icon-class="password" size="1.2em" />
                    <span class="itemText">密码</span>
                  </label>
                </div>
              </div>
              <div class="submitBox" @click.stop="userLogin">
                <span class="submit fill">Login In</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { LocationQuery } from 'vue-router'
import { useRoute } from 'vue-router'
import createBack from '@/utils/canvasBack'
import SvgIcon from '@/components/SvgIcon/index.vue'
import router from '@/router'

//状态管理
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const route = useRoute()

let selectIndex = ref(1)
let userForm = reactive({
  username: '',
  password: ''
})

let createStar: any = undefined

function switchFnc(index: number) {
  selectIndex.value = index
  resetForm(userForm)
}

function resetForm(formState: Record<string, any>) {
  for (const key in formState) {
    if (formState.hasOwnProperty(key)) {
      formState[key] = ''
    }
  }
}

// function register() {
//   userStore.register(userForm).then((res) => {
//     ElMessage.success('注册成功')
//     selectIndex.value = 1
//   })
// }

function register() {
  userStore.register(userForm).then((res) => {
    ElMessage.success('注册成功')
    selectIndex.value = 1
  })
}

async function userLogin() {
  try {
    const res = await userStore.login(userForm)
    ElMessage.success('登录成功')
    resetForm(userForm)
    const { path, queryParams } = parseRedirect()
    router.push({ path: path, query: queryParams })
  } catch (error) {}
}

// 解析 redirect 字符串 为 path 和  queryParams
function parseRedirect(): {
  path: string
  queryParams: Record<string, string>
} {
  const query: LocationQuery = route.query
  const redirect = (query.redirect as string) ?? '/'
  const url = new URL(redirect, window.location.origin)
  const path = url.pathname
  const queryParams: Record<string, string> = {}
  url.searchParams.forEach((value, key) => {
    queryParams[key] = value
  })
  return { path, queryParams }
}

onMounted(() => {
  createStar = new createBack()
  createStar.create({ el: '.loginContainer' }).drawStar(15, 550, 80).clickPoint(40)
})

onUnmounted(() => {
  // 清除画布
  createStar.clear()
  createStar = null
})
</script>

<style scoped lang="scss">
.loginContainer {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to top, #c6ecf1 0%, #ace0f9 100%);
  background-color: #000;
  overflow: hidden;

  :deep(#starCanvas) {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .loginMain {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
    width: 600px;
    max-width: 90%;
    height: 400px;
    display: flex;
    flex-direction: column;

    .loginTitle {
      position: relative;
      font-size: 30px;
      line-height: 1;
      font-weight: bold;
      color: transparent;
      background-color: #202124;
      background-clip: text;
      -webkit-background-clip: text;
      text-align: center;
      margin-bottom: 10px;
      &::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 5;
        background-image: linear-gradient(
          120deg,
          transparent 0%,
          transparent 6rem,
          white 11rem,
          transparent 11.15rem,
          transparent 15rem,
          rgba(255, 255, 255, 0.3) 20rem,
          transparent 25rem,
          transparent 27rem,
          rgba(255, 255, 255, 0.6) 32rem,
          white 33rem,
          rgba(255, 255, 255, 0.3) 33.15rem,
          transparent 38rem,
          transparent 40rem,
          rgba(255, 255, 255, 0.3) 45rem,
          transparent 50rem,
          transparent 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        background-size: 150% 100%;
        background-repeat: no-repeat;
        animation: shine 4s infinite linear;
      }
      @keyframes shine {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -190% 0;
        }
      }
    }

    .loginList {
      --lessWidth: 50px;
      --borderColor: #03e9f4;
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #202124;
      overflow: hidden;

      .loginItem {
        position: relative;
        width: var(--lessWidth);
        min-width: 0;
        height: 100%;
        cursor: pointer;
        border-radius: calc(var(--lessWidth) / 2);
        transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.5);
        // box-shadow:
        //   0 4px 6px rgba(0, 0, 0, 0.1),
        //   0 1px 3px rgba(0, 0, 0, 0.06);
        box-shadow: var(--jx-box-shadow-light);
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.active {
          width: calc(100% - var(--lessWidth) - 10px);
          flex-direction: column;
          .showText {
            writing-mode: unset;
          }
        }
      }

      .showText {
        padding: 5px 0;
        font-size: 1.2em;
        font-weight: bold;
        color: #fff;
        writing-mode: vertical-lr;
      }

      .register {
        .registerBox {
          width: 100%;
          flex: 1;
          transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        }
      }

      .login {
        .loginBox {
          width: 100%;
          flex: 1;
          transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
        }
      }

      .userForm {
        padding: 10px 40px;
        .userItem {
          position: relative;
          height: 3.1em;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          margin-bottom: 30px;
          input {
            width: 100%;
            line-height: 1.5em;
            background: transparent;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            color: #fff;
            font-size: 1em;
            transition: 0.5s;
          }

          label {
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 1.2em;
            color: #fff;
            padding: 2px 0;
            pointer-events: none;
            transition: 0.5s;
          }

          input[data-required] + label .itemText {
            &::after {
              content: '*';
              color: red;
            }
          }

          &:focus-within {
            label {
              bottom: 1.6em;
              color: var(--borderColor);
              font-size: 1em;
              svg {
                font-size: 1em;
              }
            }
            input {
              border-bottom: 1px solid var(--borderColor);
            }
          }

          input:valid {
            border-bottom: 1px solid var(--borderColor);
          }

          input:valid + label {
            bottom: 1.6em;
            color: var(--borderColor);
            font-size: 1em;
            svg {
              font-size: 1em;
            }
          }
        }
      }

      .submitBox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 60px;
        .submit {
          --color: #03e9f4;
          --hover: #03e8f466;
          min-width: 0;
          flex: 1;
          color: var(--color);
          transition: 0.25s;
          background: none;
          border: 2px solid;
          font: inherit;
          line-height: 1;
          margin: 0.5em;
          padding: 1em 0;
          border-radius: 6px;
          white-space: nowrap;
          text-align: center;
          &:hover,
          &:focus {
            border-color: var(--hover);
            color: #fff;
          }
          &.fill:hover,
          .fill:focus {
            box-shadow: inset 0 0 0 2em var(--hover);
          }
        }
      }
    }

    @include respond-to(mb) {
      height: 320px;

      .loginTitle {
        font-size: 24px;
      }
      .loginList {
        --lessWidth: 30px;
        font-size: 14px;
      }
    }
  }
}
</style>
